import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text(''),
          ),
          body: RowTest()
          // RowButtonBody()
          // RowBody()
          // ColumnAndFlex(),
          ),
    );
  }
}

class RowButtonBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: () {},
      // Row水平方向尽可能占据大空间,使用mainAxisSize改为包裹内容
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(Icons.bug_report),
          Text('bug报告'),
        ],
      ),
    );
  }
}

class RowBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      // 主轴方式分布方式,spaceBetween除两边中间间距平分。spaceAround两边间距是中间的一半。
      // spaceEvenly所有间距平分
      mainAxisAlignment: MainAxisAlignment.start,
      // 交叉轴基线对齐,textBaseline设置基线种类
      textBaseline: TextBaseline.alphabetic,
      crossAxisAlignment: CrossAxisAlignment.baseline,
      children: [
        // 包裹Flexible，可以给不同子元素分配不同的空间占据
        Flexible(
          // 指定该组件占据父组件多少剩余空间，tight为占据所有剩余空间
          // 如果父组件中其他children也有Flexible包裹，则会为其留点空间而不是占据所有
          fit: FlexFit.tight,
          // 通过flex指定其占据空间的比例
          flex: 1,
          child: Container(
            width: 80,
            height: 80,
            color: Colors.red,
            child: Text(
              'Hello',
              style: TextStyle(fontSize: 20),
            ),
          ),
        ),
        Flexible(
          flex: 3,
          fit: FlexFit.tight,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
            child: Text(
              'Fauks',
              style: TextStyle(fontSize: 20),
            ),
          ),
        ),
        Container(
          width: 90,
          height: 90,
          color: Colors.green,
          child: Text(
            'World',
            style: TextStyle(fontSize: 18),
          ),
        ),
        Container(
          width: 50,
          height: 120,
          color: Colors.yellowAccent,
          child: Text(
            'xiao',
            style: TextStyle(fontSize: 20),
          ),
        ),
      ],
    );
  }
}

class ColumnAndFlex extends StatelessWidget {
  const ColumnAndFlex({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // Flex是Row、Column的父类，可以指定方向
        Flex(
          direction: Axis.horizontal, // 横向
          children: [
            // Expanded为Flexible子类，fit属性设置为FlexFit.tight，其既可以延伸也可以收缩
            // Row、Column等控件，其子控件超过父组件大小，则报错。
            // 可以使用Expanded包裹控件，超过父组件时将其收缩，不会报错
            Expanded(
                flex: 2,
                child: Container(
                  height: 50.0,
                  color: Colors.yellow,
                )),
            Expanded(
                flex: 3,
                child: Container(
                  height: 50.0,
                  color: Colors.redAccent,
                )),
          ],
        ),
        SizedBox(height: 20),
        Flex(
          // 布局方向为横向
          direction: Axis.horizontal,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Flexible(
              child: Container(
                height: 20,
                color: Colors.yellow,
              ),
              flex: 2,
              fit: FlexFit.loose,
            ),
            Flexible(
              child: Container(
                height: 40,
                color: Colors.pink,
              ),
              flex: 1,
              fit: FlexFit.loose,
            ),
          ],
        ),
        SizedBox(height: 20),
        //AspectRatio 可以让子控件按照指定宽高比显示
        //AspectRatio会铺满自己的父控件，如果没有父控件按照屏幕铺满
        AspectRatio(
          aspectRatio: 16 / 9,
          child: Container(
            color: Colors.red,
          ),
        )
      ],
    );
  }
}

class RowTest extends StatefulWidget {
  @override
  _RowTestState createState() => _RowTestState();
}

class _RowTestState extends State<RowTest> {
  bool _isFavor = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.yellowAccent,
      padding: EdgeInsets.all(12),
      child: Row(
        // 两个子元素平分Row
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text('hello'),
          IconButton(
            icon: Icon(
              Icons.favorite,
              color: _isFavor ? Colors.red : Colors.white,
            ),
            onPressed: () {
              setState(() {
                _isFavor = !_isFavor;
              });
            },
          ),
        ],
      ),
    );
  }
}
